<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.6.6/themes/color.css">
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>

<body>
    <div class="easyui-layout" style="width:700px;height:350px;" data-options="fit:true,border:false">
        <div data-options="region:'west',split:true" title="分类" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'列表',iconCls:'icon-ok'">

            <div class="easyui-panel" style="padding:5px;background:#f4f4f4;border-color:#ddd;width:100%;">
                <input class="easyui-searchbox" data-options="prompt:'请输入产品名称',searcher:doSearch,menu:'#mm'" style="width:30%">
                <div id="mm" style="width:120px">
                    <div data-options="name:'name'">名称</div>
                    <div data-options="name:'classname'">分类</div>
                </div>
                <a href="#" class="easyui-linkbutton" onclick="$('#dlg').attr('title', '添加产品').dialog('open');"
                    data-options="plain:true,iconCls:'icon-add'">添加</a>
                <a href="#" class="easyui-linkbutton" onclick="deleRows()" data-options="plain:true,iconCls:'icon-cut'">删除</a>
            </div>

            <table id="dg" data-options="border:false" style="width:100%;height:86.6%;"></table>

            <div id="dlg" class="easyui-dialog" title="添加产品" data-options="closed:true,iconCls:'icon-save'" style="width:420px;height:420px;padding:10px">
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="name" style="width:350px" data-options="label:'名称:',required:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="info" style="width:350px;height:100px;" data-options="label:'信息:',multiline:true,labelPosition:'left'">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="cc" class="easyui-combobox" name="classid" style="width:350px;" data-options="
                        url:'http://localhost:3000/classify/classlist/1',
                        method:'get',
                        valueField:'_id',
                        textField:'text',
                        editable:false,
                        panelHeight:'auto',
                        label: '分类:',
                        ">
                    </div>
                    <div style="margin-bottom:20px">
                        <input id="ss" class="easyui-numberspinner" name="inventory" style="width:350px;" required="required"
                            data-options="min:0,max:100,increment: 10,label: '库存:',editable:true">
                    </div>
                    <div style="margin-bottom:20px">
                        <input class="easyui-numberspinner" value="0" name="salary" data-options="label:'单价:',labelPosition:'left',min:0,increment:100,prefix:'￥'"
                            style="width:350px;">
                    </div>

                    <input type="hidden" name="_id" />
                </form>
                <!--  <form id="form1" method="post" enctype="multipart/form-data" class="easyui-form" data-options="novalidate:true">
                    <input id="txtNewsImage" name="imgFile1" class="easyui-filebox" style="width: 200px; font-size: 15px" data-options="prompt:'选择一张图片...',buttonText:'点击选择',editable:false" />
                </form> -->
                <div style="text-align:center;padding:5px 0">
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    var globalUrl = 'http://localhost:3000/';
    function doSearch(value, Name) {//表头搜索查询，关键字两种：产品名；分类名
        if (Name == 'name') {
            loadDatagrid('', '', value);
        } else {
            loadDatagrid('', value);
        }

    }
    /* 左侧树状分类 */
    $('#tt').tree({
        url: `${globalUrl}classify/list/1`,
        method: 'post',
        onClick: function (nod) {
            var parentid=nod.parentId;
            var classid = nod.classify;//取分类ID
            if (classid) {
                loadDatagrid(classid);
            }else if(!parentid){
                loadDatagrid();
            }
        }
    });

    function loadDatagrid(classId, className, Name) {//封装加载datagrid,classId分类查询条件
        $('#dg').datagrid({
            url: `${globalUrl}product/itemlist`,
            method: 'post',
            queryParams: {//加入查询条件classid显示分类
                classid: classId,
                classname: className,
                name: Name
            },
            pagination: true,
            columns: [[
                { field: 'ck', checkbox: true },
                { field: 'name', title: '名称', width: 200, halign: 'center' },
                { field: 'info', title: '简介', width: 300, halign: 'center' },
                { field: 'classname', title: '分类', width: 100, align: 'center' },
                { field: 'inventory', title: '库存', width: 100, align: 'center' },
                { field: 'salary', title: '单价', width: 100, align: 'center' },
                {
                    field: '_id', title: '操作', width: 180, align: 'center',
                    formatter: function (value, row, index) {
                        return `<a href="javascript:editData('${row._id}')" class="dataGridBtn c1" style="height:25px;">修改</a> <a href="javascript:deleData('${row._id}')" class="dataGridBtn c5" style="height:25px;">删除</a> `
                    }
                }
            ]],
            onLoadSuccess:function(){
                $('.dataGridBtn').linkbutton();
            }
        });
    }
    loadDatagrid();


    function func() {//取消form默认事件
        return false;
    }

    function submitForm() {//新增产品提交
        $('#ff').form('submit', {
            onSubmit: function () {

                if ($(this).form('enableValidation').form('validate')) {
                    // 表单验证成功
                    var formData = $("#ff").serializeJSON();
                    var className = $("#cc").combobox('getText');
                    formData.classname = className;
                    console.log(formData);
                    console.log(className);

                    if (formData._id.length > 0) {
                        $.ajax({
                            url: `${globalUrl}product/item/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).then(res => {
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    } else {
                        delete formData._id;
                        $.ajax({
                            url: `${globalUrl}product/item`,
                            type: 'post',
                            data: formData
                        }).then(res => {
                            clearForm();
                            $('#dlg').dialog('close');
                            $("#dg").datagrid("reload");
                        })
                    }

                }
                return false;
            }
        });
    }
    function clearForm() {//取消新增产品提交
        $('#ff').form('clear');
    }

    function editData(id) {//修改产品详情
        $('#ff').form('load', `${globalUrl}product/item/${id}`);
        $('#dlg').attr('title', '修改产品');
        $('#dlg').dialog('open');
    }

    function deleData(id) {//删除此条产品
        $.messager.confirm('提示', '你确认删除该数据?', function (r) {
            if (r) {
                $.ajax({
                    url: `${globalUrl}product/item/${id}`,
                    type: 'delete'
                }).then(res => {
                    $("#dg").datagrid("reload");
                })
            }
        });
    }

    function deleRows() {//删除选中（多条）产品
        var selections = $('#dg').datagrid('getSelections');
        if (selections.length > 0) {
            $.messager.confirm('提示', '你确认删除该数据?', function (r) {
                if (r) {
                    var ids = [];
                    for (let i = 0; i < selections.length; i++) {
                        ids.push(selections[i]._id);
                    }
                    $.ajax({
                        url: `${globalUrl}product/item/remove`,
                        type: 'POST',
                        data: {
                            ids: ids.toString()
                        }
                    }).then(res => {
                        $("#dg").datagrid("reload");
                    })
                }
            });
        }
    }


// $("#txtNewsImage").filebox({
//             onChange: function (newValue, oldValue) {
//                 if ($("#txtNewsImage").filebox("getText") == "") {
//                     $.messager.alert('提示', "请先上传图片", 'warning');
//                     return;
//                 }
//                 $('#form1').form('submit', {
//                     url: "Hdr_Upload.ashx?method=UpImage&filename=imgFile1&oldName=" + oldName,
//                     success: function (result) {
//                         result = $.parseJSON(result);
//                         if (result.error != "0") {
//                             $.messager.alert('提示', result.error, 'warning');
//                             return;
//                         }
//                         $("#img1").attr("src", result.url);//img1是图片的预览
//                     }
//                 });
//             }
//         });
</script>